<template>
  <div>
    <div class="select_top">
      <el-input
        placeholder="请输入项目名称"
        v-model="codename"
        style="width:15%;margin-right:10px"
        clearable
      ></el-input>
      <el-select v-model="codeflag" placeholder="工资类型" style="width:15%" clearable>
        <el-option
          v-for="item in wageType"
          :key="item.hash.code_id"
          :label="item.hash.code_name"
          :value="item.hash.code_id"
        ></el-option>
      </el-select>
      <el-button size="mini" @click="getwageList" type="primary">搜索</el-button>
      <el-button size="mini" type="primary" style="float:right" @click="newwage">新增</el-button>
    </div>
    <el-table style="margin:20px 0" ref="filterTable" border :data="wageList">
      <el-table-column type="index" width="50" label="序号"></el-table-column>
      <el-table-column prop="hash.codeflagname" label="工资类型"></el-table-column>
      <el-table-column prop="hash.codename" label="项目名称"></el-table-column>
      <el-table-column prop="hash.codetype" label="项目类型">
        <template slot-scope="scope">
          <span v-if="scope.row.hash.codetype=='0'">数值</span>
          <span v-else>公式</span>
        </template>
      </el-table-column>
      <el-table-column prop="hash.ordernumber" label="项目排序"></el-table-column>
      <el-table-column prop="hash.codevalue" label="公式">
        <template slot-scope="scope">
          <span v-if="scope.row.hash.codevalue==''" style="color:#aaa">无</span>
          <span v-else>{{scope.row.hash.codevalue}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="changeSX(scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="deleteSX(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :currentPage.sync="currentPage"
      :pageSize="pagesize"
      layout="total, prev, pager, next, jumper"
      :total="total"
      style="text-align:center"
    ></el-pagination>
    <el-dialog :title="poptitle" :visible.sync="showS" v-dialogDrag>
      <el-form labelWidth="140px">
        <el-form-item label="工资类型" class="is-required">
          <el-select v-model="wageData.codeflag" placeholder="请选择" style="width:100%">
            <el-option
              v-for="item in wageType"
              :key="item.hash.code_id"
              :label="item.hash.code_name"
              :value="item.hash.code_id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工资项目" class="is-required">
          <el-input v-model="wageData.codename" v-validate="'required'" name="工资项目"></el-input>
          <div class="el-form-item__error">{{ errors.first('工资项目') }}</div>
        </el-form-item>
        <el-form-item label="项目排序" class="is-required">
          <el-input
            v-model="wageData.ordernumber"
            oninput="value=value.toString().match(/^[1-9]\d*$/)"
            v-validate="'required'"
            name="项目排序"
          ></el-input>
          <div class="el-form-item__error">{{ errors.first('项目排序') }}</div>
        </el-form-item>
        <el-form-item label="项目类型" class="is-required">
          <el-radio v-model="wageData.codetype" label="0" @change="wageData.codevalue=''">数值</el-radio>
          <el-radio v-model="wageData.codetype" label="1" @change="wageData.codevalue=''">公式</el-radio>
        </el-form-item>

        <el-form-item label="公式" class="is-required" v-if="wageData.codetype=='1'">
          <el-input v-model="wageData.codevalue" v-validate="'required'" name="公式"></el-input>
          <div class="el-form-item__error">{{ errors.first('公式') }}</div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="showS = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="newSX" v-if="poptitle=='新增工资项目'">确 定</el-button>
        <el-button size="mini" type="primary" @click="saveSX" v-else>保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ts: this.newStore(),
      currentPage: 1,
      pagesize: 10,
      total: 0,
      showS: false,
      poptitle: "新增工资项目",
      codeflag: "",
      codename: "",
      wageType: [],
      wageList: [],
      wageData: {
        codetype: "1"
      }
    };
  },
  created() {
    this.getwageType();
    this.getwageList();
  },
  methods: {
    handleCurrentChange() {
      this.getwageList();
    },
    getwageList() {
      const req = {
        handle:
          "5A4A3E4E20E0D8E9DF4D9F70BB944481169301F78074E09AB67592DEC25DEC83",
        codeflag: this.codeflag,
        query: this.codename,
        start: (this.currentPage - 1) * this.pagesize,
        limit: this.pagesize
      };
      this.spost(this.ts, "/mainservlet", req).then(ts => {
        console.log(ts.d);
        this.wageList = ts.d.data.operation1;
        this.total = parseInt(ts.d.data.operation2[0].hash.allrs);
      });
    },
    newwage() {
      this.poptitle = "新增工资项目";
      this.showS = true;
    },
    changeSX(item) {
      this.wageData = {
        codetype: "0"
      };
      const req = {
        handle:
          "5A4A3E4E20E0D8E9F649FA99F50A3FE0317E134A1BCFC8A61F0C438E24ECDA3C",
        id: item.hash.id
      };
      this.spost(this.ts, "/mainservlet", req).then(ts => {
        this.wageData = ts.d.data.operation1[0].hash;
      });

      this.poptitle = "修改工资项目";
      this.showS = true;
    },
    getwageType() {
      const req = {
        handle: "67A5B6FEF17D97DECF116BDF95B95C0B167942DD3F1604F9",
        supid: "1",
        codetype: "02"
      };
      this.spost(this.ts, "/mainservlet", req).then(ts => {
        console.log(ts.d);
        this.wageType = ts.d.data.operation1;
      });
    },
    newSX() {
      this.$validator.validateAll().then(result => {
        if (result) {
          const req = {
            handle:
              "5A4A3E4E20E0D8E9FCB20E876828079DB6E5BF9A53AD2FA9BFF0B9210751F692",
            codename: this.wageData.codename,
            codevalue: this.wageData.codevalue,
            codetype: this.wageData.codetype,
            codeflag: this.wageData.codeflag,
            ordernumber: this.wageData.ordernumber
          };
          this.$confirm("确定新增?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              this.spost(this.ts, "/mainservlet", req).then(() => {
                this.$message({
                  type: "success",
                  message: "提交成功!"
                });
                this.getwageList();
                this.showS = false;
                this.wageData = {};
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消"
              });
            });
        } else {
          this.$message.error("内容不能为空！");
          return false;
        }
      });
    },
    saveSX() {
      this.$validator.validateAll().then(result => {
        if (result) {
          const req = {
            handle:
              "5A4A3E4E20E0D8E994D6836948462DFB77EA42E12ABF89A5B67592DEC25DEC83",
            codename: this.wageData.codename,
            id: this.wageData.id,
            codevalue: this.wageData.codevalue,
            codetype: this.wageData.codetype,
            codeflag: this.wageData.codeflag,
            ordernumber: this.wageData.ordernumber
          };
          this.$confirm("确定提交修改?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              this.spost(this.ts, "/mainservlet", req).then(() => {
                this.$message({
                  type: "success",
                  message: "提交成功!"
                });
                this.getwageList();
                this.showS = false;
                this.wageData = {};
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消"
              });
            });
        } else {
          this.$message.error("内容不能为空！");
          return false;
        }
      });
    },

    getsxList() {
      const req = {
        handle:
          "5A4A3E4E20E0D8E9DF4D9F70BB944481169301F78074E09AB67592DEC25DEC83",
        pname: this.queryParam
      };
      this.spost(this.ts, "/mainservlet", req).then(ts => {
        this.sxList = ts.d.data.operation1;
      });
    },
    deleteSX(item) {
      const req = {
        handle:
          "5A4A3E4E20E0D8E94B8949FF1D1776BE8CD6599315F1B395B67592DEC25DEC83",
        id: item.hash.id
      };
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.spost(this.ts, "/mainservlet", req).then(() => {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.getwageList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>

<style lang="stylus" scoped>
.el-form-item.is-required .el-form-item__label:before {
  content: '*';
  color: #f56c6c;
}

.el-table th>.cell {
  text-align: center;
}

.el-table .cell {
  text-align: center;
}

.el-select {
  width: 14%;
  margin-right: 1%;
}
</style>
